<template>
	<view class="register-container">
		<!-- Logo部分 -->
		<view class="logo-section">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-title">绿茵裁判通</text>
		</view>

		<!-- 注册卡片 -->
		<view class="register-card">
			<!-- 注册/登录切换部分 -->
			<view class="tab-section">
				<view class="tab-item active">
					<text>用户注册</text>
					<view class="active-line"></view>
				</view>
				<view class="tab-item login-tab" @click="goToLogin">
					<text>账号登录</text>
				</view>
			</view>
			
			<!-- 表单部分 -->
			<view class="form-section">
				<!-- 昵称输入框 -->
				<view class="input-group">
					<view class="input-icon">
						<text class="icon-text">👤</text>
					</view>
					<input class="input-field" type="text" v-model="registerForm.nickname" placeholder="请输入昵称" />
				</view>
				
				<!-- 用户名输入框 -->
				<view class="input-group">
					<view class="input-icon">
						<text class="icon-text">📝</text>
					</view>
					<input class="input-field" type="text" v-model="registerForm.username" placeholder="请输入用户名(字母/数字)" />
				</view>
				
				<!-- 密码输入框 -->
				<view class="input-group">
					<view class="input-icon">
						<text class="icon-text">🔒</text>
					</view>
					<input class="input-field" :type="showPassword ? 'text' : 'password'" v-model="registerForm.password" placeholder="请输入密码(6位以上)" />
					<view class="eye-icon" @click="togglePasswordVisibility('password')">
						<text class="eye-text">{{showPassword ? '🙈' : '👁️'}}</text>
					</view>
				</view>
				
				<!-- 确认密码输入框 -->
				<view class="input-group">
					<view class="input-icon">
						<text class="icon-text">🔒</text>
					</view>
					<input class="input-field" :type="showConfirmPassword ? 'text' : 'password'" v-model="registerForm.confirmPassword" placeholder="请确认密码" />
					<view class="eye-icon" @click="togglePasswordVisibility('confirmPassword')">
						<text class="eye-text">{{showConfirmPassword ? '🙈' : '👁️'}}</text>
					</view>
				</view>
				
				<!-- 用户协议 -->
				<view class="agreement-section">
					<checkbox-group @change="agreementChange">
						<label class="agreement-item">
							<checkbox :checked="registerForm.agreement" color="#1BAE76" style="transform:scale(0.8);" />
							<text class="agreement-text">我已阅读并同意</text>
							<text class="agreement-link" @click="showAgreement">《用户协议》</text>
							<text class="agreement-text">和</text>
							<text class="agreement-link" @click="showPrivacy">《隐私政策》</text>
						</label>
					</checkbox-group>
				</view>
				
				<!-- 注册按钮 -->
				<button class="register-btn" @click="handleRegister" :disabled="!registerForm.agreement">注册</button>
				
				<!-- 登录提示 -->
				<view class="login-tip" @click="goToLogin">
					<text>已有账号？立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerForm: {
					nickname: '',
					username: '',
					password: '',
					confirmPassword: '',
					agreement: false
				},
				showPassword: false,
				showConfirmPassword: false
			}
		},
		methods: {
			// 切换密码显示
			togglePasswordVisibility(type) {
				if (type === 'password') {
					this.showPassword = !this.showPassword;
				} else {
					this.showConfirmPassword = !this.showConfirmPassword;
				}
			},
			
			// 协议勾选
			agreementChange(e) {
				this.registerForm.agreement = e.detail.value.length > 0;
			},
			
			// 显示用户协议
			showAgreement() {
				uni.navigateTo({
					url: '/pages/common/agreement?type=user'
				});
			},
			
			// 显示隐私政策
			showPrivacy() {
				uni.navigateTo({
					url: '/pages/common/agreement?type=privacy'
				});
			},
			
			// 跳转到登录页面
			goToLogin() {
				uni.navigateBack();
			},
			
			// 用户名验证
			validateUsername() {
				if (!this.registerForm.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return false;
				}
				
				// 用户名长度验证
				if (this.registerForm.username.length < 3 || this.registerForm.username.length > 20) {
					uni.showToast({
						title: '用户名长度需在3-20位之间',
						icon: 'none'
					});
					return false;
				}
				
				// 用户名格式验证 - 支持纯字母、纯数字、字母+数字
				const usernameReg = /^[a-zA-Z0-9]+$/;
				if (!usernameReg.test(this.registerForm.username)) {
					uni.showToast({
						title: '用户名只能包含字母和数字',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 表单验证
			validateForm() {
				if (!this.registerForm.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.validateUsername()) {
					return false;
				}
				
				if (!this.registerForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				
				if (this.registerForm.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return false;
				}
				
				if (this.registerForm.password !== this.registerForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.registerForm.agreement) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 处理注册
			async handleRegister() {
				if (!this.validateForm()) return;
				
				uni.showLoading({
					title: '注册中...'
				});
				
				try {
					// 使用云对象调用，将用户名映射到phone字段传给后端
					const userService = uniCloud.importObject('user-service');
					const res = await userService.register({
						nickname: this.registerForm.nickname,
						phone: this.registerForm.username, // 将用户名映射到phone字段
						email: this.registerForm.username + '@temp.com', // 生成临时邮箱
						password: this.registerForm.password,
					});
					
					uni.hideLoading();
					
					if (res.code === 0) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.message || '注册失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '注册失败，请稍后重试',
						icon: 'none'
					});
					console.error('注册请求出错:', error);
				}
			}
		}
	}
</script>

<style>
	.register-container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #F8F8F8, #FFFFFF);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}
	
	/* Logo部分样式 */
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40px;
		margin-bottom: 30px;
	}
	
	.logo {
		width: 80px;
		height: 80px;
		border-radius: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	
	.app-title {
		font-size: 18px;
		color: #1BAE76;
		font-weight: bold;
		margin-top: 10px;
	}
	
	/* 注册卡片样式 */
	.register-card {
		width: 90%;
		background-color: #FFFFFF;
		border-radius: 15px;
		padding: 20px;
		box-shadow: 0 5px 15px rgba(0,0,0,0.05);
		margin-bottom: 30px;
	}
	
	/* 标签切换样式 */
	.tab-section {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	
	.tab-item {
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		color: #333;
		position: relative;
		text-align: center;
		flex: 1;
	}
	
	.tab-item.active {
		font-weight: bold;
	}
	
	.tab-item.login-tab {
		background-color: #FFFFFF;
		color: #1BAE76;
		border-radius: 20px;
		margin-left: 15px;
		border: 1px solid #1BAE76;
	}
	
	.active-line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 3px;
		background-color: #1BAE76;
		border-radius: 2px;
	}
	
	/* 表单部分样式 */
	.form-section {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.input-group {
		width: 100%;
		height: 50px;
		background-color: #F5F5F5;
		border-radius: 25px;
		margin-bottom: 15px;
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.input-icon {
		padding: 0 10px 0 15px;
		display: flex;
		align-items: center;
	}
	
	.icon-text {
		font-size: 18px;
		color: #999;
	}
	
	.input-field {
		flex: 1;
		height: 100%;
		padding-right: 40px;
		font-size: 16px;
		background-color: transparent;
		border: none;
		outline: none;
	}
	
	.eye-icon {
		position: absolute;
		right: 15px;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.eye-text {
		font-size: 16px;
		color: #999;
	}
	
	.agreement-section {
		margin: 20px 0;
		padding: 0 5px;
	}
	
	.agreement-item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		line-height: 1.6;
	}
	
	.agreement-text {
		color: #666;
		font-size: 14px;
		margin-right: 5px;
	}
	
	.agreement-link {
		color: #1BAE76;
		font-size: 14px;
		margin-right: 5px;
	}
	
	.register-btn {
		width: 90%;
		height: 50px;
		line-height: 50px;
		border-radius: 25px;
		background: linear-gradient(to right, #1BAE76, #3CD6A0);
		color: white;
		font-size: 16px;
		font-weight: bold;
		border: none;
		margin: 20px auto 10px auto;
		text-align: center;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.register-btn:active {
		opacity: 0.8;
	}
	
	.register-btn[disabled] {
		background: #cccccc;
		color: #999999;
	}
	
	.login-tip {
		display: flex;
		justify-content: center;
		font-size: 14px;
		color: #1BAE76;
		margin-top: 10px;
	}
	
	.login-tip:active {
		opacity: 0.8;
	}
</style> 